Fullscreen-compatible Detached Thumbnail Bar

When using the thumbnail bar in detached mode, the thumbnail-bar is not part of the viewer anymore. It will therefore not be included in fullscreen mode, where the only way to navigate will be the navigation buttons.

The following example demonstrates how to display a thumbnail-bar only on fullscreen mode, to compensate for the lack thereof.

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result

Loading...

Live Editor

function Example() {
  const ref = useRef();

  useEffect(() => {
    const viewer = ref.current;
    if (!viewer) return;
    viewer.addEventListener("fullscreen-change", isFullscreen => {
      viewer.classList.toggle("fullscreen", isFullscreen.detail);
    });
  }, []);

  return (
    <>
      <style>{`
        cylindo-viewer cylindo-thumbnail-bar {
          display: none;
        }
        cylindo-viewer.fullscreen cylindo-thumbnail-bar {
          display: block;
        }
      `}</style>
      <cylindo-thumbnail-bar
        for="1234"
        style={{ display: "none", marginBottom: "100px" }}
      />
      <cylindo-viewer
        ref={ref}
        id="1234"
        customer-id="5098"
        code="ARMCHAIR-PDP"
        presentation="gallery"
        controls="fullscreen nav"
      >
        <cylindo-studio code="RS-BARILA-A" customer-id="5098" />
        <cylindo-360-frame frame="10" />
        <cylindo-360 frame="3" />
        <cylindo-model />
        <cylindo-dimension-shot dimension-code="UXPP" unit="Cm" />
        <cylindo-thumbnail-bar />
      </cylindo-viewer>
    </>
  );
}